<template>
  <div>
    <x-header title="我的收货地址" style="background-color: #33bb99;position: fixed;width:100%;top:0;"><a slot="right"></a>
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      <span slot="right"  @click="addOpen('0')" style="color: #fff;font-size: 0.8rem;">添加新地址</span>
    </x-header>
    <flexbox orient="vertical" style="width: 95%;margin: 50px auto 0;">
      <flexbox-item v-for="(v,index) in addList" :key="index"><div class="flex-demo">
        <p><span>{{v.contacts}}</span> {{v.mobile}}</p>
        <p><i class="iconfont icon-dizhi1"></i>{{v.province}}{{v.city}}{{v.area}}{{v.detail_address}}</p>
        <div class="btn">
          <span @click="setDefault(v)"><icon type="success" v-if="v.is_default==1"></icon><icon type="circle" v-if="v.is_default==0"></icon>默认地址</span>
          <div>
            <!--<span @click="edit(v)">修改</span>-->
            <span @click="del(v)"><i class="fa fa-trash"></i></span>
          </div>
        </div>
      </div></flexbox-item>
    </flexbox>
  </div>
</template>
<script>
  import { XHeader, Flexbox, FlexboxItem } from 'vux'
  export default {
    name:'',
    components: {
      XHeader, Flexbox, FlexboxItem
    },
    data(){
      return {
        addList: [],
        editInfo: {
          "id": "",
          "provinces_id": "",
          "cities_id": "",
          "areas_id": "",
          "detail_address": "",
          "contacts": "",
          "mobile": "",
          "purchasers_id": "",
          "is_default": "0"
        },

      }
    },
    methods:{
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      // 获取地址列表
      getAddList(){
        this.$vux.loading.show();
        this.config1.post('/purchasers/app/purchasersaddress/findAll', {}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.addList = res.data.addressList;
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 子组件选择地址完成
      choosed(obj){
        this.editInfo.provinces_id = obj.provinceid;
        this.editInfo.cities_id = obj.cityid;
        this.editInfo.areas_id = obj.areaid;
        console.log(this.editInfo)
      },
      // 点击添加按钮
      addOpen(str){
        this.$router.push('/project1/view3/address-add');
      },
      // valid
      valid(){
        if(!this.editInfo.areas_id){
          this.msg('请选择完整的地址');
          return false;
        }
        if(!this.editInfo.detail_address){
          this.msg('请填写详细地址');
          return false;
        }
        if(!this.editInfo.contacts){
          this.msg('请填写联系人');
          return false;
        }
        if(!this.editInfo.detail_address){
          this.msg('请填写联系电话');
          return false;
        }
        return true;
      },
      // 设置默认收货地址
      setDefault(v){
        this.$vux.loading.show();
        this.config1.post('/purchasers/app/purchasersaddress/changeIsDefault', {addressId: v.id}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
            this.getAddList();
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 编辑
      edit(v){
        this.$vux.loading.show();
        this.config1.post('/purchasers/app/purchasersaddress/findById', {addressId: v.id}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.editInfo = res.data.purchasersAddress;
            this.$refs.addressLink.show(this.editInfo);
            this.addOpen('1');
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      del(v){
        let self = this;
        this.$vux.confirm.show({
          title: '删除',
          content: '是否确定删除？',
          onConfirm () {
            self.$vux.loading.show();
            self.config1.post('/purchasers/app/purchasersaddress/delete', {addressId: v.id}).then(res=>{
              self.$vux.loading.hide();
              if(res.data.code==='0'){
                self.msg(res.data.message);
                self.getAddList();
              }else{
                self.msg(self.config1.handleError(res.data));
              }
            })
          }
        });
      },
      back(){
        this.$router.push('/project1/view3/index');
      },
      add(){
        if(!this.valid()) return;
        let obj = {
          'purchasersAddress.id': this.editInfo.id,
          'purchasersAddress.provinces_id': this.editInfo.provinces_id,
          'purchasersAddress.cities_id': this.editInfo.cities_id,
          'purchasersAddress.areas_id': this.editInfo.areas_id,
          'purchasersAddress.detail_address': this.editInfo.detail_address,
          'purchasersAddress.contacts': this.editInfo.contacts,
          'purchasersAddress.mobile': this.editInfo.mobile,
          'isDefault': this.editInfo.is_default,
        };
        let url = this.editInfo.id?'/purchasers/app/purchasersaddress/edit':'/purchasers/purchasersaddress/add';
        this.$vux.loading.show();
        this.config1.post(url, obj).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
            this.getAddList();
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      }
    },
    mounted(){
      this.getAddList();
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .address-list{
    .addressItem{
      margin: 1rem 0;
    }
  }
  .flex-demo{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 8px #bbbbbd;
    margin-top: 0.3rem;
    font-size:0.8rem;
    line-height:1.5rem;
    padding:0.5rem;
    p{
      color:#666;
      span{
        padding-left:1.3rem;
        font-weight: 600;
        padding-right:0.2rem;
        color:#000;
      }
      .iconfont{
        color:#33bb99;
        padding-right:0.2rem;
        font-size: 1rem;
      }
    }
    .btn{
      display: flex;
      line-height:2.5rem;
      justify-content: space-between;
      .fa{
        font-size:1.2rem;
        padding-top:0.5rem;
        color:#e94545;
      }
    }
  }
</style>
